<template>
  <div>
    <ky-table
      :getData="getPackageChange"
      :search_data="search_data"
      :search_criteria="search_criteria"
    >
      <template v-slot:table>
        <el-table-column prop="name" :label="$t('system.package_name')">
        </el-table-column>
        <el-table-column
          prop="versionRelease"
          :label="$t('system.package_version')"
        >
        </el-table-column>
        <el-table-column prop="statusNow" :label="$t('system.change_type')">
        </el-table-column>
        <el-table-column prop="updatedAt" :label="$t('configure.change_time')">
        </el-table-column>
      </template>
    </ky-table>
  </div>
</template>

<script>
import kyTable from "@/components/KyTable";
import {getPackageChange} from "@/api/host_detail"
export default {
  components: {
    kyTable,
  },
  data() {
    return {
      search_data: {
          name: {
              name: "system.package_name",
              type: "virtual_list",
              func: this.getPackageNames,
              items: []
          },
          versionRelease: {
              name: "system.package_version",
              type: "text"
          },
          updatedAt: {
              name: "system.install_time",
              type: "date"
          },
          statusNow: {
              name: "system.change_type",
              type: "text"
          }
      },
      search_criteria: {
          sortBy: "id",
          sortOrder: "desc",
          hostId: this.$route.params.id
      }
    };
  },
  methods: {
      getPackageChange,
      getPackageNames() {
        getPackageChange({paged: false, hostId: this.$route.params.id}).then(res => {
            let result = res.data.data.results;
            let items = new Set()
            result.forEach(item => {
                items.add(item.name)
            })
            this.search_data.name.items = Array.from(items);
        })
    },
  }
};
</script>

<style>
</style>